<template>
    <!--热门产品-->
    <div class="product-overview-contain">
        <div class="product-item-box" v-for="item in list" :key="item.id">
            <div class="product-left">
                <div class="product-intro">
                    <div class="product-name">
                        {{ item.name }}
                    </div>
                    <div class="product_describe">
                        {{ item.describe }}
                    </div>
                    <div class="product-jump-more" @click="jumpIntro(item.name)">了解更多</div>
                </div>
            </div>
            <ul
                class="product-course-list"
                :class="{ col3: item.courses.length % 3 !== 1 }"
            >
                <li v-for="(course, j) in item.courses" :key="j">
                    <div class="course-head-img">
                        <img :src="course.fengmian_pic_url" alt="" />
                        <div class="top-discount" v-if="course.deadline_price">
                            <span>{{(course.one_price / course.deadline_price).toFixed(1)}}折</span>
                        </div>
                    </div>
                    <div class="course-msg">
                        <div class="course-title">
                            {{ course.name }}
                        </div>
                        <div class="course-describe">
                            {{ course.good_desc }}
                        </div>
                        <ul class="course-tags">
                            <li v-show="course.tese1">
                                <i></i><span>{{ course.tese1 }}</span>
                            </li>
                            <li v-show="course.tese2">
                                <i></i><span>{{ course.tese2 }}</span>
                            </li>
                            <li v-show="course.tese3">
                                <i></i><span>{{ course.tese3 }}</span>
                            </li>
                        </ul>
                        <div class="course-price">
                            <p class="current-prize">
                                <span class="price-type">￥</span>
                                <span class="price">{{ course.one_price | fixNumber }}</span>
                                <span class="unit">
                                    /
                                    {{ transyouxiaoqi(course.youxiaoqi) }}
                                </span>
                            </p>
                            <p class="origin-prize">
                                ￥{{ course.deadline_price | fixNumber }}
                            </p>
                        </div>
                        <div
                            class="course-buy-btn"
                            @click="handleBuyProduct(course.id)"
                        >
                            立即购买
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'productOverview',
    components: {
        /**/
    },
    data() {
        return {
            account: '',
            colors: ['#76b4d9', '#76c1ac', '#f08e83', '#9873d3'],
            list: [
                {
                    id: 1,
                    name: 'CPA',
                    describe:
                        '中国唯一官方认可的注册会计师资质，具有唯一审计签字权的职业资质',
                    courses: []
                },
                {
                    id: 2,
                    name: 'CMA',
                    describe:
                        '美国管理会计师的简称，美国财会领域的国际三大黄金认证之一，在全球范围内均被企业所认可。',
                    courses: []
                }
            ]
        };
    },
    watch: {
        /**/
    },
    mounted() {
        this.initGoodsList();
    },
    methods: {
        initGoodsList() {
            this.list.forEach(item => {
                this.ajaxGetGoods(item.name).then(res => {
                    item.courses = res.obj;
                    // this.$set(item.courses,res.obj)
                    // console.log(JSON.stringify(this.list))
                });
            });
        },
        // 点击购买按钮
        handleBuyProduct(id) {
            const { href } = this.$router.resolve({
                name: 'landingPage',
                query: { id: id }
            });
            window.open(href, '_blank');
        },
        ajaxGetGoods(name) {
            let option = {
                pathName: 'doGetGoods',
                params: {
                    lab_name: name,
                    page: 1,
                    size: 6
                }
            };
            return this.$api.ajaxData(option);
        },
        transyouxiaoqi(val) {
            let name = '';
            switch (val) {
                case 0:
                    name = '永久';
                    break;
                default:
                    name = name + '年';
                    break;
            }
            return name;
        },
        jumpIntro(labname){
            this.$router.push({name:'labIntro',query: {
                name: labname
            }})
        }
    }
};
</script>
<style scoped lang="scss">
.product-overview-contain {
    .product-item-box {
        display: flex;
        margin-bottom: 10px;
        .product-left {
            padding: 0 30px 30px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            font-family: '微软雅黑';
            .product-intro {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                max-height: 260px;
                .product-name {
                    display: block;
                    height: 95px;
                    line-height: 95px;
                    font-size: 72px;
                    font-weight: bold;
                    color: #fff;
                }
                .product_describe {
                    display: block;
                    width: 224px;
                    line-height: 28px;
                    font-size: 14px;
                    color: #fff;
                    text-align: justify;
                }
                .product-jump-more {
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    margin: 12px auto 0;
                    border-radius: 20px;
                    font-size: 13px;
                    font-weight: bold;
                    color: transparent;
                    text-align: center;
                    background: rgba(255, 255, 255, 0.8);
                    transition-duration: 300ms;
                    cursor: pointer;
                }
                .product-jump-more:hover {
                    background: rgba(255, 255, 255, 1);
                }
            }
        }
        .product-course-list {
            flex: 1 1;
            display: flex;
            flex-wrap: wrap;
            > li {
                position: relative;
                width: 24.1%;
                padding: 1.2% 1.2% 0;
                margin-right: 1.2%;
                border: 1px solid #f2f2f2;
                box-sizing: border-box;
                background: #fff;
                .course-head-img {
                    position: relative;
                    padding-top: 40.6%;
                    img {
                        position: absolute;
                        top: 0;
                        height: 100%;
                        width: 100%;
                        border: none;
                        background: #f7f7f7;
                    }
                    .top-discount {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 68px;
                        height: 49px;
                        line-height: 32px;
                        font-size: 15px;
                        font-weight: bold;
                        color: #fff;
                        background: linear-gradient(
                            144deg,
                            #f90 50%,
                            transparent 50%
                        );
                    }
                }
                .course-msg {
                    padding: 3px 0 0 0;
                    line-height: 28px;
                    font-size: 12px;
                    .course-title {
                        font-size: 16px;
                        color: #333;
                        font-weight: bold;
                    }
                    .course-describe {
                        color: #999;
                        font-size: 14px;
                        font-weight: 400;
                    }
                    .course-tags {
                        display: flex;
                        flex-wrap: wrap;
                        color: #666;
                        li {
                            display: flex;
                            align-items: center;
                            padding-right: 3px;
                            i {
                                display: block;
                                width: 16px;
                                height: 16px;
                                flex-shrink: 0;
                                margin-right: 3px;
                                background: url('../../assets/image/icon/u174.png')
                                    no-repeat;
                                background-size: contain;
                            }
                            span {
                                display: block;
                                max-width: 60px;
                                margin-right: 5px;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }
                        }
                    }
                    .course-price {
                        margin-top: 5px;
                        padding: 7px 0;
                        .current-prize {
                            line-height: 24px;
                            margin: 0;
                            color: #ff6a00;
                            .price-type {
                                font-size: 14px;
                            }
                            .price {
                                font-size: 18px;
                            }
                            .unit {
                                font-size: 14px;
                                color: #666666;
                            }
                        }
                        .origin-prize {
                            line-height: 20px;
                            margin: 0;
                            font-size: 12px;
                            color: #ccc;
                            text-decoration: line-through;
                        }
                    }
                    .course-buy-btn {
                        opacity: 0;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 60px;
                        line-height: 60px;
                        font-size: 16px;
                        color: #fff;
                        background: #ff6a00;
                        text-align: center;
                        transition-duration: 100ms;
                        cursor: pointer;
                    }
                }
            }
            > li:nth-child(4n) {
                margin-right: 0;
            }
            > li:hover {
                .course-buy-btn {
                    opacity: 1;
                }
            }
        }
        .col3 {
            > li {
                width: 32.5%;
                margin-right: 1.25%;
            }
            > li:nth-child(4n) {
                margin-right: 1.25%;
            }
            > li:nth-child(3n) {
                margin-right: 0;
            }
        }
    }
    .product-item-box:first-child {
        .product-left {
            background: #76b4d9;
            .product-jump-more {
                color: #76b4d9;
            }
        }
    }
    .product-item-box:nth-child(2) {
        .product-left {
            background: #76c1ac;
            .product-jump-more {
                color: #76c1ac;
            }
        }
    }
    .product-item-box:nth-child(3) {
        .product-left {
            background: #f08e83;
            .product-jump-more {
                color: #f08e83;
            }
        }
    }
    .product-item-box:nth-child(4) {
        .product-left {
            background: #9873d3;
            .product-jump-more {
                color: #9873d3;
            }
        }
    }
}
    p,ul,li,h1,h2,h3,h4 {
        margin-bottom: 0;
    }
</style>
